import 'swiper/css'
import { Http } from '../../../../Common/Api'
import { useRequest, useSetState } from 'ahooks'
import { useState, useEffect } from 'react'
import { Select, TreeSelect, Pagination, Result, Modal } from 'antd'
import { CaretDownOutlined } from '@ant-design/icons'
import { Video } from '../../../../Common/Configure/Video'
import { Player, BigPlayButton } from 'video-react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { commonUrl } from '../../../../Common/Configure/CommonParameter'
import { CommonSmallTitle } from './SmallTitle'
import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]
const { Option } = Select

const defaultValue = {
    projectUuid: '0',
    organizationUuid: '0',
    cameraTypeUuid: '0',
    cameraPositionUuid: '0',
    pageSize: '6',
    pageIndex: 1,
}

const NumberData = [
    { label: '一屏', value: '1' },
    { label: '二屏', value: '2' },
    { label: '四屏', value: '4' },
    { label: '六屏', value: '6' },
    { label: '八屏', value: '8' },
    { label: '九屏', value: '9' },
    { label: '十二屏', value: '12' },
]

// 标准监控
export const MonitorBox = ({ style, OrgData, isHidden, defaultData, number, IsHideRegion }) => {
    const [data, setData] = useSetState(defaultValue)
    const [ProjectSelect, setProjectSelect] = useState([{ uuid: '0', tableName: '全部项目' }])
    const [TendersSelect, setTendersSelect] = useState([{ uuid: '0', tableName: '全部标段' }])
    const [TypeSelect, setTypeSelect] = useState([{ uuid: '0', tableName: '全部类型' }])
    const [PositionSelect, setPositionSelect] = useState([{ uuid: '0', tableName: '全部部位' }])
    const [videoList, setVideoList] = useState([])
    const [videoTotal, setVideoTotal] = useState(0)

    useEffect(() => {
        let data = {
            projectUuid: defaultData?.Project || '0',
            organizationUuid: defaultData?.Tender || '0',
            cameraTypeUuid: defaultData?.Type || '0',
            cameraPositionUuid: defaultData?.Position || '0',
            pageSize: number || '6',
            pageIndex: 1,
        }
        setData({ ...data })
    }, [defaultData, number, setData])

    // 摄像头数据
    const { run: getCameras } = useRequest(Http, {
        debounceWait: 500,
        manual: true,
        onSuccess: ({ total, list }) => {
            setVideoTotal(total)
            setVideoList(list)
        },
    })
    // 项目列表
    const { run: getProject } = useRequest(Http, {
        manual: true,
        debounceWait: 500,
        onSuccess: ({ list }) => setProjectSelect([{ uuid: '0', tableName: '全部项目' }, ...list]),
    })
    // 组织结构
    const { run: getOrganizations } = useRequest(Http, {
        manual: true,
        debounceWait: 500,
        onSuccess: ({ list }) => setTendersSelect([{ uuid: '0', tableName: '全部标段' }, ...list]),
    })
    // 摄像头类型
    const { run: getCamerasTypes } = useRequest(Http, {
        manual: true,
        debounceWait: 500,
        onSuccess: ({ list }) => setTypeSelect([{ uuid: '0', tableName: '全部类型' }, ...list]),
    })
    // 摄像头位置信息
    const { run: getCamerasPositions } = useRequest(Http, {
        manual: true,
        debounceWait: 500,
        onSuccess: res => setPositionSelect([{ uuid: '0', tableName: '全部部位' }, ...res]),
    })

    useEffect(() => {
        let pra = JSON.parse(JSON.stringify(data))
        Object.keys(pra).forEach(key => {
            if (pra[key] === '0') delete pra[key]
        })
        if (OrgData?.data) pra = { ...pra, ...OrgData.data }
        getCameras({ url: `getCameras`, data: pra })
    }, [getCameras, data, OrgData])

    useEffect(() => {
        getProject({ url: 'getProjectList' })
        getCamerasTypes({ url: `getCameraTypes` })
        getCamerasPositions({ url: `getCameraPositions` })
    }, [OrgData, getProject, getCamerasPositions, getCamerasTypes])

    useEffect(() => {
        let par = { pageIndex: 1, pageSize: 10000 }
        if (data.projectUuid !== '0') par.projectUuid = [data.projectUuid]
        getOrganizations({ url: `getOrganizations`, data: par })
    }, [OrgData, data, getOrganizations])

    return (
        <div className="MonitorFrontBox">
            <div className="options" style={style}>
                {!IsHideRegion && (
                    <div>
                        <div>监控区域：</div>
                        {/* 项目 */}
                        {isHidden?.Project && (
                            <Select
                                style={{ width: 120, marginRight: 8 }}
                                value={data.projectUuid}
                                placeholder="请选择项目"
                                suffixIcon={<CaretDownOutlined style={{ color: 'white', fontSize: 11 }} />}
                                onChange={e => setData({ projectUuid: e, organizationUuid: '0', pageIndex: 1 })}
                                options={ProjectSelect}
                                fieldNames={{ label: 'tableName', value: 'uuid' }}
                            />
                        )}
                        {/* 标段 */}
                        {!isHidden?.Tender && (
                            <Select
                                style={{ width: 120, marginRight: 8 }}
                                value={data.organizationUuid}
                                placeholder="请选择组织机构"
                                suffixIcon={<CaretDownOutlined style={{ color: 'white', fontSize: 11 }} />}
                                onChange={e => setData({ organizationUuid: e, pageIndex: 1 })}
                                options={TendersSelect}
                                fieldNames={{ label: 'tableName', value: 'uuid' }}
                            />
                        )}
                        {/* 类型 */}
                        {!isHidden?.Type && (
                            <Select
                                style={{ width: 120, marginRight: 8 }}
                                value={data.cameraTypeUuid}
                                placeholder="请选择类型"
                                suffixIcon={<CaretDownOutlined style={{ color: 'white', fontSize: 11 }} />}
                                onChange={e => setData({ cameraTypeUuid: e, pageIndex: 1 })}
                                options={TypeSelect}
                                fieldNames={{ label: 'tableName', value: 'uuid' }}
                            />
                        )}
                        {/* 部位 */}
                        {!isHidden?.Position && (
                            <TreeSelect
                                style={{ width: 120 }}
                                value={data.cameraPositionUuid}
                                dropdownStyle={{ minWidth: 240, maxHeight: 400, overflow: 'auto' }}
                                treeData={PositionSelect}
                                placeholder="请选择部位"
                                treeDefaultExpandAll
                                suffixIcon={<CaretDownOutlined style={{ color: 'white', fontSize: 11 }} />}
                                onChange={e => setData({ cameraPositionUuid: e, pageIndex: 1 })}
                                fieldNames={{ label: 'tableName', value: 'uuid' }}
                            />
                        )}
                    </div>
                )}

                <div>
                    <div>显示方式：</div>
                    <Select
                        style={{ width: 100 }}
                        value={data.pageSize}
                        placeholder="请选择数量"
                        suffixIcon={<CaretDownOutlined style={{ color: 'white', fontSize: 11 }} />}
                        onChange={e => setData({ pageSize: e, pageIndex: 1 })}
                        options={NumberData}
                    />
                </div>
            </div>
            <div className="HomeMonitorList">
                {videoList.length !== 0 ? (
                    videoList.map(item => (
                        <div
                            key={`HomeMonitorList${item.uuid}`}
                            className="HomeMonitorListItem"
                            style={(() => {
                                switch (videoList.length) {
                                    case 1:
                                        return { width: '100%', height: '100%' }
                                    case 2:
                                        return { width: 'calc(50% - 10px)', height: '100%' }
                                    case 3:
                                        return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                    case 4:
                                        return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                    case 5:
                                        return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                    case 6:
                                        return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                    case 7:
                                        return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                    case 8:
                                        return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                    case 9:
                                        return { width: 'calc((100% / 3) - 10px)', height: 'calc((100% / 3) - 10px)' }
                                    case 10:
                                        return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                    case 11:
                                        return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                    case 12:
                                        return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                    default:
                                        break
                                }
                            })()}
                        >
                            <Video data={item} date={new Date().getTime()} />
                        </div>
                    ))
                ) : (
                    <div className="MonitorNot">
                        <Result title="响应监控内容为空!" />
                    </div>
                )}
            </div>
            {videoList.length !== 0 && (
                <div className="Pagination">
                    <Pagination
                        total={videoTotal}
                        showTotal={total => `共${total}条记录 -- 当前第${data.pageIndex}页`}
                        showSizeChanger={false}
                        pageSize={data.pageSize}
                        current={data.pageIndex}
                        onChange={e => setData({ pageIndex: e })}
                    />
                </div>
            )}
        </div>
    )
}

// 宣传片
export const TrailerBox = ({ data }) => {
    const [active, setActive] = useState(data[0].uuid)
    return (
        <div className="TrailerBox">
            <div className="Video">
                <Player
                    fluid={false}
                    width={'100%'}
                    height={'100%'}
                    playsInline
                    src={data[data.findIndex(v => v.uuid === active)].url}
                >
                    <BigPlayButton position="center" />
                </Player>
            </div>
            <div className="List">
                <Swiper
                    className="TrailerBoxList"
                    direction="vertical"
                    autoplay
                    slidesPerView={3}
                    spaceBetween={20}
                    centeredSlides
                >
                    {data.length !== 0 &&
                        data.map((item, index) => {
                            return (
                                <SwiperSlide
                                    key={`bannerSwiper${index}`}
                                    style={
                                        active === item.uuid
                                            ? { backgroundImage: `url(${commonUrl}选中阴影.png) ` }
                                            : {}
                                    }
                                    className={active === item.uuid ? 'active' : ''}
                                    onClick={() => {
                                        setActive(item.uuid)
                                    }}
                                >
                                    <img src={item.image || `${imageUrl}视频背景.png`} alt="" />
                                    <div className="SwiperName">{item.title}</div>
                                </SwiperSlide>
                            )
                        })}
                </Swiper>
            </div>
        </div>
    )
}

// 视频弹出层
export const MonitorModalBox = ({ className, Off, data }) => {
    console.log('data', data)

    const [{ cameraData, tableName }] = data

    return (
        <Modal
            className="MoreModal"
            onCancel={Off}
            open={true}
            footer={null}
            destroyOnClose
            maskClosable={false}
            keyboard={false}
            width="80vw"
        >
            <CommonSmallTitle className={className} title={tableName} flex={63} style={{ marginRight: 16 }}>
                <div className="HomeMonitorList">
                    {cameraData.length !== 0 ? (
                        cameraData.map(item => (
                            <div
                                key={`HomeMonitorList${item.uuid}`}
                                className="HomeMonitorListItem"
                                style={(() => {
                                    switch (cameraData.length) {
                                        case 1:
                                            return { width: '100%', height: '100%' }
                                        case 2:
                                            return { width: 'calc(50% - 10px)', height: '100%' }
                                        case 3:
                                            return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                        case 4:
                                            return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                        case 5:
                                            return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                        case 6:
                                            return { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' }
                                        case 7:
                                            return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                        case 8:
                                            return { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' }
                                        case 9:
                                            return {
                                                width: 'calc((100% / 3) - 10px)',
                                                height: 'calc((100% / 3) - 10px)',
                                            }
                                        case 10:
                                            return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                        case 11:
                                            return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                        case 12:
                                            return { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' }
                                        default:
                                            break
                                    }
                                })()}
                            >
                                <Video data={item} date={new Date().getTime()} />
                            </div>
                        ))
                    ) : (
                        <div className="MonitorNot">
                            <Result title="响应监控内容为空!" />
                        </div>
                    )}
                </div>
            </CommonSmallTitle>
        </Modal>
    )
}
